<template>
  <div class="login-container">
    <div class="login-body">
      <div class="login-title">测井曲线重构</div>
      <div>
        <el-form :model="registerForm" ref="" :rules="registerRules">
          <el-form-item class="el-form-item" prop="userName">
            <el-input type="text" v-model="registerForm.userName" suffix-icon="iconfont icon-user"
                      placeholder="请输入您的账号" ></el-input>
          </el-form-item >
          <el-form-item class="el-form-item" prop="userPassWord">
            <el-input type="password" v-model="registerForm.userPassword" suffix-icon="iconfont icon-mima"
                      placeholder="请输入您的密码" show-password >
            </el-input>
          </el-form-item >
          <el-form-item class="el-form-item" prop="name">
            <el-input type="text" v-model="registerForm.name" suffix-icon="iconfont icon-xingming"
                      placeholder="请输入您的姓名" >
            </el-input>
          </el-form-item>
          <el-form-item class="el-form-item" prop="age">
            <el-input type="text" v-model="registerForm.age" suffix-icon="iconfont icon-nianling"
                      placeholder="请输入您的年龄" >
            </el-input>
          </el-form-item>
          <el-form-item class="el-form-item" prop="phone">
            <el-input type="text" v-model="registerForm.phone" suffix-icon="iconfont icon-dianhua"
                      placeholder="请输入您的电话" >
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button style="
                                margin-top: 15px;
                                width: 100%;
                                background-color: #6495ed;

                            " @click="register('registerForm')" type="primary">
              <b style="font-size: 22px;">注册</b></el-button><br />
            <el-button style="width: 100%; margin-top: 5px" @click="close()" :underline="false"
                       type="info">
              <b style="font-size: 22px;">取消</b></el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>


<script>
export default {
  name: "register",
  data() {
    const _self = this
    // 用户名规则
    var checkUserName= (rule, value, callback) => {
        // _self.$http.post("/api/checkUserName",
        //   {userName: _self.registerForm.userName}).then(resp => {
        //   if (resp.data.code == 200) {
        //     callback()
        //   } else {
        //     callback(new Error('用户名重复！'));
        //   }
        // })
    };
    // 密码规则
    var checkUserPassword  = (rule, value, callback) => {
      //规则
      if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,8}$/.test(value)) {
        // 没满足规则时输出错误内容
        callback(new Error('密码由数字和字母组成，4-8位'));
      }
      else callback()
    };
    // 年龄规则
    var checkAge = (rule, value, callback) => {
      //规则
      if (!/^[0-9]/.test(value)) {
        // 没满足规则时输出错误内容
        callback(new Error('只能输入数字'));
      }
      else callback()
    };
    // 电话规则
    var checkPhone = (rule, value, callback) => {
      //规则
      if (!/^[0-9]{11}$/.test(value)) {
        // 没满足规则时输出错误内容
        callback(new Error('请输入11位的数字'));
      }
      else callback()
    };

    return {
      //注册表单绑定属性
      registerForm:{
        id: "",
        userName: "",
        userPassWord: "",
        name: "",
        age: "",
        phone: "",
      },
      // 注册表单规则
      registerRules:{
        //命名必须与输入框绑定的属性名称一样
        userName:[
          { required: true, message: '请输入用户名', trigger: 'blur' },
          {
            validator: checkUserName,
            trigger: "blur",
          },
        ],
        userPassWord: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          {
            validator: checkUserPassword,
            trigger: "blur",
          }
        ],
        name:[
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age:[
          { required: true, message: '请输入年龄', trigger: 'blur' },
          {
            validator: checkAge,
            trigger: "blur",
          }
        ],
        phone:[
          { required: true, message: '请输入电话', trigger: 'blur' },
          {
            validator: checkPhone,
            trigger: "blur",
          }
        ],
        address:[
          { required: true, message: '请输入地址', trigger: 'blur' }
        ],
      }
    };
  },
  methods: {
    //注册按钮绑定方法
    register(registerForm){
      const _self=this
      _self.$refs[registerForm].validate((valid) => {
        if(valid){
          console.log(_self.registerForm)
          _self.$http.post("/api/register", _self.registerForm).then(function (resp) {
            console.log(resp.data.data)
            _self.$message.success(resp.data.msg)
            _self.$refs[registerForm].resetFields();
            _self.showRegisterFlag = false
          })
        }
        else{
          _self.$message.warning("请按照提示填写信息")
          return false;
        }
      })
    },
    //取消注册按钮绑定方法
    close(){
      this.$router.replace("/login");
    }
  }
};
</script>


<style>
@import url('../css/login.css');

.el-form-item {
  margin-bottom: 15px;
}

</style>
